<!DOCTYPE html>
<html>
<head>
<title>Energy Level Diagram</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="400" style="border:1px solid #d3d3d3;"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    
    // Style settings for a hand-drawn look, matching the original image
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 3;
    ctx.lineCap = 'round';

    // --- Main Drawing ---

    // 1. Draw Axes
    const axisOrigin = { x: 100, y: 320 };
    const axisTop = { x: 100, y: 50 };
    const axisEnd = { x: 450, y: 320 };
    
    ctx.beginPath();
    // Vertical axis (Energy)
    ctx.moveTo(axisOrigin.x, axisOrigin.y);
    ctx.lineTo(axisTop.x, axisTop.y);
    // Horizontal baseline
    ctx.moveTo(axisOrigin.x, axisOrigin.y);
    ctx.lineTo(axisEnd.x, axisEnd.y);
    ctx.stroke();

    // 2. Draw Energy Levels and Ticks on the axis
    const y_eps0 = 250; // Y-coordinate for the lower energy level
    const y_eps1 = 120; // Y-coordinate for the upper energy level
    
    ctx.beginPath();
    // Tick for ε₀
    ctx.moveTo(axisOrigin.x - 5, y_eps0);
    ctx.lineTo(axisOrigin.x + 5, y_eps0);
    // Tick for ε₀ + Δ
    ctx.moveTo(axisOrigin.x - 5, y_eps1);
    ctx.lineTo(axisOrigin.x + 5, y_eps1);
    
    // Horizontal lines representing the energy levels
    const level_len = 100;
    // S_1/2 level line
    ctx.moveTo(140, y_eps0); 
    ctx.lineTo(140 + level_len, y_eps0);
    // P_1/2 level line
    ctx.moveTo(270, y_eps0); 
    ctx.lineTo(270 + level_len, y_eps0);
    // P_3/2 level line
    ctx.moveTo(270, y_eps1); 
    ctx.lineTo(270 + level_len, y_eps1);
    ctx.stroke();

    // 3. Draw Labels
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';

    // Axis Labels with a hand-drawn font style
    // Label ε₀
    ctx.font = 'italic bold 24px "Comic Sans MS", cursive, sans-serif';
    ctx.fillText('ε', 50, y_eps0);
    ctx.font = 'italic bold 16px "Comic Sans MS", cursive, sans-serif';
    ctx.fillText('0', 68, y_eps0 + 6);

    // Label ε₀ + Δ
    // The image shows 'ε₀ · Δ', but problem context and standard notation imply 'ε₀ + Δ'
    ctx.font = 'italic bold 24px "Comic Sans MS", cursive, sans-serif';
    ctx.fillText('ε', 20, y_eps1);
    ctx.font = 'italic bold 16px "Comic Sans MS", cursive, sans-serif';
    ctx.fillText('0', 38, y_eps1 + 6);
    ctx.font = 'italic bold 24px "Comic Sans MS", cursive, sans-serif';
    ctx.fillText('+ Δ', 50, y_eps1); // Using '+' as per problem description

    // State Labels
    // S_1/2
    ctx.font = 'bold 28px "Comic Sans MS", cursive, sans-serif';
    ctx.fillText('S', 250, y_eps0);
    ctx.font = 'bold 18px "Comic Sans MS", cursive, sans-serif';
    ctx.fillText('1/2', 268, y_eps0 + 6);

    // P_1/2
    ctx.font = 'bold 28px "Comic Sans MS", cursive, sans-serif';
    ctx.fillText('P', 380, y_eps0);
    ctx.font = 'bold 18px "Comic Sans MS", cursive, sans-serif';
    ctx.fillText('1/2', 400, y_eps0 + 6);

    // P_3/2
    ctx.font = 'bold 28px "Comic Sans MS", cursive, sans-serif';
    ctx.fillText('P', 380, y_eps1);
    ctx.font = 'bold 18px "Comic Sans MS", cursive, sans-serif';
    ctx.fillText('3/2', 400, y_eps1 + 6);
    
    // 4. Draw Figure Caption with a standard serif font
    ctx.font = 'bold 20px "Times New Roman", serif';
    ctx.textAlign = 'center';
    ctx.fillText('Fig. 5.14', 275, 370);

</script>
</body>
</html>